import logoSvg from '@/assets/images/logo.svg';
import {Button, Space, Tag} from 'antd';
import type {ProSettings} from '@ant-design/pro-layout';
import ProLayout, {SettingDrawer} from '@ant-design/pro-layout';
import {useEffect, useState} from 'react';
import {Outlet, Link,history } from 'umi';
import Footer from './components/Footer';
import AvatarDropdown from './components/RightContent/AvatarDropdown';
import {TITLE} from '@/constants';
import {useAppData} from '@umijs/max';
import {useRouteData} from "@@/exports";
import {LeftOutlined} from "@ant-design/icons";

export default () => {
    //菜单同步路由
    const routeData = useRouteData();
    const [pathname, setPathname] = useState('/');
    useEffect(() => {
        let abortController = new AbortController();
        setPathname(routeData?.route?.path || '/')
        return () => {
            abortController.abort();
        };
    }, [routeData?.route?.path]);
    //路由处理
    const {clientRoutes} = useAppData();
    const [newClientRoutes, setNewClientRoutes] = useState([]);
    const [appRoutes, setAppRoutes] = useState([]);
    useEffect(() => {
        let abortController = new AbortController();
        const funC = (list) => {
            list = list.map((item) => {
                const route = {
                    hideChildrenInMenu: item?.hideChildrenInMenu,
                    hideInMenu: item?.hideInMenu,
                    icon: item?.icon,
                    name: item?.name,
                    path: item?.path,
                    routes: [],
                };
                if(route.path && /\/\*$/.test(route.path)){
                    route.path = route.path.substring(0, route.path.length - 2);
                }
                if(item.routes){
                    route.routes = funC(item.routes);
                }
                return route;
            })
            return list;
        }
        //设置应用路由
        setAppRoutes(funC(clientRoutes).filter((item)=>{
            return item.path === '/apps'
        }));
        //设置基础路由
        setNewClientRoutes(funC(clientRoutes).map((item)=>{
            if(item.path === '/apps'){
                item.routes = []
            }
            return item;
        }));
        return () => {
            abortController.abort();
        };
    }, []);
    //设置
    const [settings, setSetting] = useState<Partial<ProSettings> | undefined>({
        headerHeight: 48, //默认 48
        layout: 'side', //side top mix
        //splitMenus:true, //layout=mix时启用配合
        navTheme: 'light', //dark light realDark
        headerTheme: 'light', //mix模式生效 dark light
    });
    return (
        <div
            id="pro-layout"
            style={{
                height: '100vh',
            }}
        >
            <ProLayout
                title={TITLE}
                logo={logoSvg}
                siderWidth={208} //默认 208
                // 植入路由，生成菜单
                location={{
                    pathname,
                }}
                route={{routes: /^\/app/.test(pathname) ? appRoutes : newClientRoutes}}
                waterMarkProps={{
                    content: TITLE,
                }}
                rightContentRender={() => (
                    <Space>
                        <AvatarDropdown/>
                    </Space>
                )}
                footerRender={() => <Footer/>}
                //页面切换事件
                onPageChange={() => {
                }}
                // 菜单项，点击跳转
                menuItemRender={(item, dom) => {
                    return <Link to={item.path ?? '/'}>{dom}</Link>;
                }}
                onMenuHeaderClick={(e) => console.log(e, 'onMenuHeaderClick')}
                menuHeaderRender={(logo, title, props) => {
                    if (!/^\/app/.test(pathname)) {
                        return (
                            <a>
                                {logo}
                                {title}
                            </a>
                        );
                    }
                    if (props?.collapsed) {
                        return (
                            <Space>
                                <LeftOutlined
                                    style={{
                                        fontSize: 24,
                                    }}
                                />
                            </Space>
                        );
                    }
                    return (
                        <Space direction="vertical">
                            <Button
                                size="small"
                                icon={<LeftOutlined />}
                                onClick={() => {
                                    history.push('/');
                                }}
                            >
                                返回主列表
                            </Button>
                            <Tag color="warning">运行中</Tag>
                        </Space>
                    );
                }}
                fixSiderbar
                menuFooterRender={(props) => {
                    return (
                        <a
                            style={{
                                lineHeight: '48rpx',
                                display: 'flex',
                                height: 48,
                                color: 'rgba(255, 255, 255, 0.65)',
                                alignItems: 'center',
                            }}
                            href="https://preview.pro.ant.design/dashboard/analysis"
                            target="_blank"
                            rel="noreferrer"
                        >
                            侧边栏页脚
                        </a>
                    );
                }}
                {...settings}
            >
                <Outlet/>
                {/* 子应用位置 */}
                {/*<div id="subContainer"></div>*/}
            </ProLayout>
        </div>
    );
};
